<template>
  <el-card>
    <div class="search">
      计划类型:
      <el-select v-model="in_planType" placeholder="请选择计划类型" size="mini">
        <el-option
          v-for="item in plantypelist"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      结算状态:
      <el-select
        v-model="in_settlementStatus"
        placeholder="请选择结算状态"
        size="mini"
      >
        <el-option
          v-for="item in settlementlist"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      项目编号：<el-input
        v-model="in_projectnumber"
        placeholder="请输入项目编号"
        size="small"
        clearable
      ></el-input>

      <el-button
        class="detail"
        icon="el-icon-search"
        @click="check"
        size="small"
        >查询</el-button
      >
      <el-button
        class="rePassword"
        icon="el-icon-refresh-right"
        size="small"
        @click="reset"
        >重置</el-button
      >
      <div class="box">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :row-style="{ height: '60px', padding: '0 0' }"
          border
          stripe
        >
          <el-table-column prop="planTypeName" label="计划类型">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column prop="projectNumber" label="项目编号">
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="项目名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="planStatus"
            label="完成状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.planStatus == '1' ? '已完成' : '未完成' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="settlementStatus"
            label="结算状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.settlementStatus == '1' ? '已结算' : '未结算' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button class="addUser" size="mini" @click="checkdetail(scope)"
                >详情</el-button
              >
              <el-button
                class="detail"
                size="mini"
                @click="changeStatus(scope)"
                >{{
                  scope.row.settlementStatus == '1' ? '取消' : '结算'
                }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- show-overflow-tooltip--自适应长度 -->
        <!-- 分页功能 -->

        <!-- 详情弹出框 -->
        <el-dialog title="项目详情" :visible.sync="detailForm" width="600px">
          <el-form :model="detailData">
            <el-form-item label="计划类型" :label-width="formLabelWidth">
              <el-input
                v-model="detailData.planTypeId"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目编号" :label-width="formLabelWidth">
              <el-input
                v-model="detailData.projectNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目名称" :label-width="formLabelWidth">
              <el-input
                v-model="detailData.projectName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="完成状态" :label-width="formLabelWidth">
              <el-input
                v-model="detailData.planStatus"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="结算状态" :label-width="formLabelWidth">
                <el-input v-model="detailData.materialWeight" autocomplete="off"></el-input>
              </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="detailForm = false">返回</el-button>
          </div>
        </el-dialog>

        <!-- 分页 -->
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-sizes="[3, 5, 10, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
import qs from 'qs';
export default {
  data() {
    return {
      plantypelist: [
        {
          value: '1',
          label: '新品'
        },
        {
          value: '2',
          label: '临措'
        },
        {
          value: '3',
          label: '抢修'
        },
        {
          value: '4',
          label: '配变电'
        },
        {
          value: '5',
          label: '线路'
        }
      ],
      settlementlist: [
        {
          value: '1',
          label: '已结算'
        },
        {
          value: '0',
          label: '未结算'
        }
      ],
      value: '',
      value2: '',
      total: 0,
      pageSize: 10,
      page: 1,
      data: [],
      in_projectnumber: '',
      detailForm: false,
      detailData: {},
      formLabelWidth: '200px',
      in_planType: '',
      in_settlementStatus: ''
    };
  },
  methods: {
    pageChange(e) {
      this.page = e;
    },

    sizeChange(e) {
      this.pageSize = e;
    },

    // 查询
    check() {
      this.axios({
        url: '/financial/getAllPlanSettlement',
        method: 'post',
        data: qs.stringify({
          planTypeId: this.in_planType,
          projectNumber: this.in_projectnumber,
          settlementStatus: this.in_settlementStatus
        }),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        if (res.data.code == 200) {
          // console.log(res);
          this.data = res.data.data.planSettlements;
          this.total = res.data.data.planSettlements.length;
        }
      });
    },

    // 重置
    reset() {
      (this.in_planType = ''),
        (this.in_projectnumber = ''),
        (this.in_settlementStatus = '');
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 查询详细信息
    checkdetail(scope) {
      this.detailForm = true;
      this.axios({
        url: '/getPlanListById',
        method: 'get',
        params: { id: scope.row.id }
      }).then(res => {
        if (res.data.code) {
          console.log(res);
          console.log(res.data.data);
          this.detailData = res.data.data.success[0];
          if (this.detailData.planTypeId == 1) {
            this.detailData.planTypeId = '新品';
          } else if (this.detailData.planTypeId == 2) {
            this.detailData.planTypeId = '临措';
          } else {
            this.detailData.planTypeId = '抢修';
          }
          this.detailData.planStatus =
            this.detailData.planStatus == 1 ? '已完成' : '未完成';
        }
      });
    },

    // 改变结算状态
    changeStatus(scope) {
      this.axios({
        url: '/financial/changePlanSettleStatus',
        method: 'post',
        data: qs.stringify({
          id: scope.row.id,
          status: scope.row.settlementStatus
        })
      }).then(res => {
        if (res.data.code == 200) {
          if (scope.row.settlementStatus == 1) {
            scope.row.settlementStatus = 0;
          } else {
            scope.row.settlementStatus = 1;
          }
        }
      });
    }
  },

  mounted() {
    this.axios({
      url: '/financial/getAllPlanSettlement',
      method: 'post',
      data: {}
    }).then(res => {
      // console.log(res);
      if (res.data.code == 200) this.data = res.data.data.planSettlements;
      this.total = res.data.data.planSettlements.length;
    });
  },

  computed: {
    tableData: function() {
      return this.data.slice(
        (this.page - 1) * this.pageSize,
        this.pageSize * this.page
      );
    }
  }
};
</script>

<style scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.search {
  border-top: 2px solid #9999;
  padding-top: 30px;
  margin-top: 15px;
}
.box {
  padding-top: 30px;
}
.el-pagination {
  margin-top: 25px;
  float: right;
}
.el-table .cell {
  text-align: center;
}
.el-table /deep/ td .cell,
.el-table /deep/ th .cell {
  text-align: center;
}

.el-button {
  margin-left: 10px;
}
</style>
